<template>
	<up-list style="background-color: #f1f1f1;">
		<up-empty :iconSize="150" text="当前暂无反馈" v-if="list.length === 0"></up-empty>
		<up-list-item v-for="item in list" :key="item.id">
			<block>
				<view class="tasklist">
					<!-- 待审核 -->
					<view class="task-orange">
						<view class="cu-bar bg-white solid-bottom margin-top">
							<view class="action">
								<view class="task_title"> {{ item.userTypeDesc }}</view>
							</view>
							<view class="action" @click='deleteFeedbacks(item.id)'>
								<button style="background-color: red;color: white;" size="mini">删除</button>
							</view>
						</view>
						<view class="cu-bar bg-white solid-bottom">
							<view class="action">
								反馈类型: {{ item.typeDesc }}
							</view>
						</view>
						<view class="cu-bar bg-white solid-bottom">
							<view class="action">
								反馈内容：{{ item.content }}
							</view>
						</view>
						<view class="cu-bar bg-white solid-bottom">
							<view class="action">
								联系号码：{{ item.contactPhone }}
							</view>
						</view>
						<view class="cu-card article">
							<view class="cu-bar bg-white solid-bottom">
								<view class="action">
									创建时间：{{ item.createTime }}
								</view>
								<view class="action" style="padding-right:10px">
									<view class="text_js">
										<text class="text-orange">{{ item.statusDesc }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</up-list-item>
	</up-list>
	<div class="btn_box">
		<up-button type="primary" @click="goAdd">+添加反馈</up-button>
	</div>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import {
	getFeedback,
	delFeedback
} from '@/api/complaint.js'

/* 数据 */
const uToastRef = ref(null)
const list = reactive([])


/* 函数 */
const goAdd = () => {
	uni.navigateTo({
		url: '/package_mine/pages/feedback/addFeedback'
	})
}
// 删除
const deleteFeedbacks = async (id) => {
	uni.showModal({
		title: '提示',
		content: '是否确定删除此反馈？',
		success: async (res) => {
			if (res.confirm) {
				uToastRef.value.show({
					message: '正在删除反馈',
					type: 'loading',
					duration: -1
				})
				let res = await delFeedback({ id })
				uToastRef.value.hide()
				if (res.success) {
					uToastRef.value.show({
						positain: 'top',
						message: '删除成功',
						type: 'success',
						duration: 1000,
						complete() {
							init()
						}
					})
				}
			}
		}
	})
}
// 获取列表
const getList = async () => {
	uToastRef.value.show({
		message: '正在获取反馈列表',
		type: 'loading',
		duration: -1
	})
	let res = await getFeedback({ limit: 100 })
	uToastRef.value.hide()
	if (res.success) {
		list.push(...res.data)
	}
}
// 初始化封装
const init = async () => {
	list.length = 0
	await getList()
}


/* 钩子 */
onShow(async () => {
	await nextTick()
	await init()
})
</script>

<style lang="scss" scoped>
.btn_box {
	position: fixed;
	bottom: 20px;
	left: 5%;
	width: 90%;
	z-index: 100;
}

.text_js {
	position: relative;
	left: 20rpx;
}

.action {
	text-align: left;
}

/*任务列表页面样式*/
page {
	background: #f1f1f1;
}

.tasklist {
	border-radius: 10px;
	color: #666;
	margin: 0 15rpx 30rpx;
	background: #fff;
	/*border:1px solid #fff;*/
}

.task-orange {
	border-left: 4px solid #f37b1d;
	box-shadow: 5px 5px 5px #ddd;
	border-radius: 6px;
}

.task-green {
	border-left: 4px solid #39b54a;
	box-shadow: 5px 5px 5px #ddd;
	border-radius: 6px;
}

.task-blue {
	border-left: 4px solid #0081ff;
	box-shadow: 5px 5px 5px #ddd;
	border-radius: 6px;
}

.task-red {
	border-left: 4px solid #e54d42;
	box-shadow: 5px 5px 5px #ddd;
	border-radius: 6px;
}

.arrow {
	width: 14px;
	height: 14px;
}

.task_title {
	font-weight: 700;
}

.tasklist .cu-bar {
	min-height: 80rpx;
}
</style>